<template>
    <div class="productProNew">
        <div class="title"><h1><span>日志详情</span></h1></div>
        <div class="journalBox">
            <h5 class="journal-title"><span>{{startCity}}</span> - {{destiCity}}</h5>
            <p class="journal-p">行程编号：{{xchSn}}</p>
            <p class="journal-p">起止日期：{{timeFormat(startDate)}} 至 {{finishDate?finishDate.substring(0,10):'未设置'}}</p>
            <p class="journal-p">管理员电话：{{managePhone}}</p>
            <ul class="journal-ul">
                <li class="clearfix" v-for="(val,index) in List">
                    <div class="daysBox" v-if="days(val,index)==true" >
                        <span class="days">{{val.day}}</span>
                        <p class="week">{{week(val.createTime.substring(0,10))}}</p>
                        <p class="date">{{val.createTime?val.createTime.substring(0,10):'未设置'}}</p>
                    </div>
                    <div class="content">
                        <p class="time">{{val.createTime?val.createTime.substring(0,10):'未设置'}}</p>
                        <p class="text">{{val.content}} </p>
                        <div class="imgBox" :class="'layer-photos-demo'+$attrs.text">
                            <span v-for="item in (val.bcontentImage || '').split(' ')" v-if="val.bcontentImage!=''"><img :src="item" :layer-src="item"></span>
                        </div>
                        <p class="text"><span class="keyword" v-for="item in (val.keywords || '').split(',')" v-if="val.bcontentImage!=''">#{{item}}</span></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script media="print">
    export default {
        data(){
            return {
                Http:'',// 数据接口连接
                routeName:'', //当前路由的信息
                payment:[ '全款支付','定金支付','确认后支付'],//付款方式
                refunds:['涉及资源的退订','不涉及资源的退订','严格的退订政策','中等的退订政策','宽松的退订政策'],//退款方式
                List:'', // 基本信息
                startCity:'',
                destiCity:'',
                xchSn:'',
                startDate:'',
                finishDate:'',
                managePhone:'',
            }
        },
        computed:{
            ptXchBlogIndex(){ // 获取基本信息
                return this.$store.state.interface.ptXchBlogIndex;
            },
        },
        methods:{
            jugeTab(){// tab信息 判断处于哪一个模块 去加载相应的self.tabList selected
                let self = this;
                let routeName = self.$route.name.toLowerCase();// 获取当前路由的信息
                self.routeName = routeName;
            },
            pictureBig(){
                layer.photos({
                    photos: '.layer-photos-demo'+this.$attrs.text
                    ,anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            },
            ReturnBtn(index){ //返回
                this.$store.commit('TOGGle_JOURNAL_COMPONENT_BTN',0);//修改vuex状态选中的索引值
                this.$emit('transferTab','BillProDefault',0);//传值
            },
            lessThenTen (time) {
                return time < 10 ? '0' + time : time
            },
            timeFormat(timeStamp){
                //timeStamp是整数，否则要parseInt转换
                let time = new Date(parseInt(timeStamp));
                return `${time.getFullYear()}-${this.lessThenTen(time.getMonth()+1)}-${this.lessThenTen(time.getDate())}`;
            },
            week(m){ //日期转换星期
                let show_day=new Array('星期一','星期二','星期三','星期四','星期五','星期六','星期日');
                let a=new Date(m).getDay();
                return show_day[a-1]
            },
            days(val,index){ //判断是否同一天
                if(index == 0){
                    return true
                }else if(val.day == this.List[index-1].day){
                    return 0
                }else{
                    return true
                }
            }
        },
        beforeMount(){
            let self = this;
            let url = self.ptXchBlogIndex;
            let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            self.Http = `${url}?sid=${sessionId}`; // 基础信息
            // 订单基础信息
            let formData =new FormData(); // 基础信息表单数据
                formData.append('xid', self.$attrs.proid);
                formData.append('app', 'liexing');
                formData.append('platform', 'web');
                formData.append('ver', '3');
            self.$ajax.post(self.Http,formData).then(function(res){
                let code = res.data.code;
                if(code === '10000'){
                    let ShowList = res.data.result;
                    for(let i in ShowList){
                        self.List = ShowList[i];
                    };
                    self.startCity=self.List[0].startCity;
                    self.destiCity=self.List[0].destiCity;
                    self.xchSn=self.List[0].xchSn;
                    self.startDate=self.List[0].startDate;
                    self.finishDate=self.List[0].finishDate;
                    self.managePhone=self.List[0].managePhone;
                    setTimeout(function(){
                        self.pictureBig()
                    },30);
                } else{
                    // 没有数据或者数据错误
                    self.codes(code);
                    layer.msg('加载失败！');
                }
            },function(res){
                layer.msg('服务器错误！');
            })

        },
        mounted(){
            let self = this;
            self.jugeTab();
        },
    }
</script>
<style lang="scss" scopded>
    .journalBox{
        .journal-title{
            font-size: 26px;
            color: #4e5e7e;
            line-height: 36px;
            margin: 20px 0;
            font-weight: normal;
        }
        .journal-p{
            font-size: 12px;
            color: #4e5e7e;
            line-height: 24px;
        }
        .journal-ul{
            padding-left: 45px;
            margin: 30px 0 30px 30px;
            border-left: 1px solid #c9c7c6;
            .daysBox{
                position: relative;
                height: 50px;
                padding: 5px 0;
                margin-bottom: 30px;
                .days{
                    position: absolute;
                    width: 60px;
                    height: 60px;
                    background-color: #09ba79;
                    border-radius: 50%;
                    top: 0;
                    left: -75px;
                    font-size: 30px;
                    text-align: center;
                    line-height: 60px;
                    color: #fff;
                }
                .week{
                    font-size: 20px;
                    color: #4e5e7e;
                    line-height: 30px;
                }
                .date{
                    font-size: 14px;
                    color: #4e5e7e;
                }
            }
            .content{
                margin-bottom: 30px;
                .time{
                    position: relative;
                    font-size: 14px;
                    color: #4e5e7e;
                    line-height: 24px;
                    &::after{
                        content: '';
                        position: absolute;
                        left: -50px;
                        top: 50%;
                        margin-top: -4px;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: #9fa5b2;

                    }
                }
                .text{
                    font-size: 14px;
                    color: #4e5e7e;
                    line-height: 20px;
                    margin: 5px 0;
                    .keyword{
                        margin-right: 10px;
                    }
                }
                .imgBox{
                    margin: 10px 0;
                    span{
                        height: 96px;
                        width: 96px;
                        margin-right: 10px;
                        display: inline-block;
                        overflow: hidden;
                        text-align: center;
                        img{
                            min-height: 100%;
                            min-width: 100%;
                            max-width: 150%;
                            max-height: 150%;
                            // display: inline-block;
                        }
                    }
                }
            }
        }

    }


</style>
